<template>
	<!-- <view>
		购物车页面
	</view> -->
	<view class="box">
		<view class="head">
			<view :class="current==item.id?'active':''" @tap="ordertab(item.id)" v-for="item in list" :key="item.id">{{item.name}}</view>
		</view>
		<view class="content">
			<view class="item" v-for="item in orderLists" :key="item.order.id">
				<view v-for="item in item.items" :key="item.id">
					<view class="title">
						<view>订单编号:{{item.orderSn}}</view>
						<view class="status">{{statusText}}</view>
					</view>
					<view class="sku">
						<image :src="item.productPic" mode=""></image>
						<view class="info">
							<view class="p1">
								<view>{{item.productName}}</view>
								<view>￥{{item.productPric}}</view>
							</view>
							<view class="p2">
								<view>编号:</view>
								<view>X{{item.productQuantity}}</view>
							</view>
							<view class="p3">
								<view>规格:</view>
								<view>颜色: 大小:</view>
							</view>
							<view class="p4">
								<!-- <view class="sales">退货中</view> -->
								<view v-if="current==2">退货</view>
							</view>
						</view>
					</view>
					<view class="price">
						<view>时间:{{item.modifyTime}}</view>
						<view>合计:￥{{item.totalPrice}}</view>
					</view>
					<view class="btns">
						<view class="btn" v-if="current==0">取消订单</view>
						<view class="btn" v-if="current==0" @tap="gopayment(item.orderId)">付款</view>
						<view class="btn" v-if="current==2">确认收货</view>
					</view>
				</view>
				
			</view>
		</view>

	</view>
	
</template>

<script>
	// cancelOrder 取消订单  receiveDone 确认收货  deleteOrder删除订单
	import {findAllOrders,cancelOrder} from "../../../api/mine/car/index.js";
	export default {
		data() {
			return {
				current:0,
				//总的订单列表
				orderList:[],
				
				list: [
					{
					name: "代付款",
					id:0
					},
					{
					name: "已付款",
					id:1
					},
					{
					name: "已发货",
					id:2
					},
					{
					name: "已收货",
					id:3
					},
					{
					name: "申请退款",
					id:9
					},
				],
			};
		},
		methods: {
			//点击转换标题栏上颜色
			ordertab(e){
				// console.log(e)
				this.current=e;
			},
			//跳转到支付页面
			gopayment(e){
				uni.navigateTo({
					url:`../../home/goods/payment/payment?id=${e}`
				})
			}
		},
		computed:{
			//循环出来的
			orderLists(){
				if(this.current==3||this.current==4){
					return this.orderList.filter(ele=>ele.order.status==3||ele.order.status==4)
				}else{
						return this.orderList.filter(ele =>ele.order.status == this.current)
				}
			},
			//当前订单对应的文字内容
			statusText(){
				if(this.current==0){
					return "未付款"
				}else if(this.current==1){
					return "等待发货"
				}else if(this.current==2){
					return "已发货"
				}else if(this.current==3){
					return "已收货"
				}else if(this.current==9){
					return "拒绝退货"
				}else{
					return "暂不知道订单状态"
				}
			}

		},
		onLoad() {
			findAllOrders().then(res=>{
				console.log(res);
				this.orderList=res.data.orderList;
			})
		}
	}
</script>

<style lang="scss" scoped>
.box{
	width: 100%;
	background-color:#F1ECE7;
	overflow: hidden;
	.head{
		position: fixed;
		left: 0;
		top:40px;
		width: 100%;
		height:31px ;
		background-color:#354e44;
		display: flex;
		justify-content:space-around;
		align-items: center;
		color: #fff;
		.active{
			color: #ff0000;
		}
	}
	.content{
		width: 100%;
		height: 100%;
		margin-top: 65px;
		.item{
			width: 336px;
			box-sizing: border-box;
			padding: 18px;
			border-radius: 12px;
			background-color: #fff;
			margin: 15px auto;
			font-size: 12px;
			color: #3e3e3e;
			.title{
				line-height: 16px;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #f1ece7;
				padding-bottom: 15px;
			}
			.sku{
				display: flex;
				justify-content: flex-start;
				border-bottom: 1px solid #f1ece7;
				padding: 15px 0;
				image{
					width: 81px;
					height: 81px;
				}
				.info{
					width: 235px;
					margin-left: 14px;
					.p1{
						font-size: 13px;
						line-height: 37px;
						display: flex;
						justify-content: space-between;
					}
					.p2{
						font-size: 11px;
						color: #8d8d8d;
						line-height: 15px;
						margin-top: 2px;
						display: flex;
						justify-content: space-between;
					}
					.p3{
						font-size: 11px;
						color: #8d8d8d;
						line-height: 15px;
						margin-top: 2px;
					}
					.p4{
						text-align: right;
						margin-top: 5px;
						color: #8d8d8d;
						text-decoration: underline;
					}
				}
			}
			.price{
				font-size: 13px;
				line-height: 18px;
				text-align: right;
				margin-top: 7px;
				display: flex;
				justify-content: space-between;
			}
			.btns{
				margin-top: 10px;
				display: flex;
				justify-content: flex-end;
				.btn{
					width: 62px;
					height: 25px;
					border: 1px solid #2d4f43;
					font-size: 13px;
					border-radius: 5px;
					color: #2d4f43;
					text-align: center;
					line-height: 25px;
					margin-left: 16px;
				}
			}
		}
	}
}
</style>
